<template>
  <div class="app-container">
    <!-- Barra lateral -->
    <Sidebar 
      class="sidebar-container" 
      :class="{ 'sidebar-collapsed': sidebarCollapsed }"
    />
    
    <div class="main-content">
      <!-- Encabezado -->
      <Header 
        title="画作" 
        :default-tab="activeTab"
        @update:tab="handleTabChange"
        @toggle-sidebar="toggleSidebar"
      />
      
      <!-- Contenido principal -->
      <div class="artworks-container">
        <el-row :gutter="16">
          <el-col 
            v-for="artwork in displayedArtworks" 
            :key="artwork.id"
            :xs="12" 
            :sm="8" 
            :md="6" 
            :lg="6" 
            :xl="4"
          >
            <ArtworkCard 
              :artwork="artwork" 
              @click="handleArtworkClick"
            />
          </el-col>
        </el-row>
        
        <!-- Paginación -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :total="totalArtworks"
            layout="prev, pager, next"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import Sidebar from '@/components/Sidebar.vue';
import Header from '@/components/Header.vue';
import ArtworkCard from '@/components/ArtworkCard.vue';

// Datos de las obras de arte (simulados)
interface Artwork {
  id: string;
  imageUrl: string;
  title: string;
  category: string;
  categoryId: string;
  isVideo?: boolean;
  isNew?: boolean;
  isEnterprise?: boolean;
}

const router = useRouter();
const sidebarCollapsed = ref(false);
const activeTab = ref('all');
const currentPage = ref(1);
const pageSize = ref(12);
const totalArtworks = ref(100);

// Simulación de datos para las obras de arte
const allArtworks = ref<Artwork[]>([
  {
    id: '1',
    imageUrl: 'https://via.placeholder.com/500x500',
    title: '写实人物肖像',
    category: '通义图生视频',
    categoryId: 'universal-video',
    isVideo: true
  },
  {
    id: '2',
    imageUrl: 'https://via.placeholder.com/500x700',
    title: '3D卡通企鹅',
    category: '魔幻3D工艺',
    categoryId: 'magical-3d',
    isNew: true
  },
  {
    id: '3',
    imageUrl: 'https://via.placeholder.com/500x500',
    title: '网球运动员',
    category: '通义图生视频',
    categoryId: 'universal-video',
    isVideo: true
  },
  {
    id: '4',
    imageUrl: 'https://via.placeholder.com/500x500',
    title: '太空猫宇航员',
    category: '通义图生视频',
    categoryId: 'universal-video',
    isVideo: true
  },
  {
    id: '5',
    imageUrl: 'https://via.placeholder.com/500x700',
    title: '校园女孩',
    category: '通义图生视频',
    categoryId: 'universal-video',
    isVideo: true
  },
  {
    id: '6',
    imageUrl: 'https://via.placeholder.com/500x300',
    title: '绿色西装模特',
    category: '通义图生视频',
    categoryId: 'universal-video',
    isVideo: true
  },
  {
    id: '7',
    imageUrl: 'https://via.placeholder.com/500x700',
    title: '白发仙女',
    category: '通义图生视频',
    categoryId: 'universal-video',
    isVideo: true
  },
  {
    id: '8',
    imageUrl: 'https://via.placeholder.com/500x500',
    title: '卡通小女孩',
    category: '魔幻人物',
    categoryId: 'magical-character'
  },
  {
    id: '9',
    imageUrl: 'https://via.placeholder.com/500x500',
    title: '卡通小女孩2',
    category: '魔幻人物',
    categoryId: 'magical-character'
  },
  {
    id: '10',
    imageUrl: 'https://via.placeholder.com/500x700',
    title: '蓝发精灵',
    category: '魔幻人物',
    categoryId: 'magical-character'
  },
  {
    id: '11',
    imageUrl: 'https://via.placeholder.com/500x500',
    title: '科技背景',
    category: 'Flux',
    categoryId: 'flux-basic'
  },
  {
    id: '12',
    imageUrl: 'https://via.placeholder.com/500x700',
    title: '风景照',
    category: 'Flux',
    categoryId: 'flux-basic'
  }
]);

// Obtener las obras filtradas según la pestaña activa
const filteredArtworks = computed(() => {
  if (activeTab.value === 'all') {
    return allArtworks.value;
  }
  return allArtworks.value.filter(artwork => artwork.categoryId === activeTab.value);
});

// Obtener las obras que se muestran en la página actual
const displayedArtworks = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return filteredArtworks.value.slice(startIndex, endIndex);
});

// Cambiar de pestaña
const handleTabChange = (tabId: string) => {
  activeTab.value = tabId;
  currentPage.value = 1; // Resetear a la primera página al cambiar de filtro
};

// Cambiar de página
const handlePageChange = (page: number) => {
  currentPage.value = page;
};

// Alternar la barra lateral
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value;
};

// Manejar el clic en una obra de arte
const handleArtworkClick = (artwork: Artwork) => {
  router.push({
    path: `/artwork/${artwork.id}`,
    query: { 
      category: artwork.categoryId
    }
  });
};

// Cargar obras de arte (simular una petición API)
const fetchArtworks = () => {
  // En un caso real, aquí harías una llamada a la API
  // Simulamos el recuento total de obras
  totalArtworks.value = allArtworks.value.length;
};

onMounted(() => {
  fetchArtworks();
});
</script>

<style lang="scss" scoped>
@use '@/assets/styles/responsive.scss' as responsive;

.app-container {
  display: flex;
  min-height: 100vh;
}

.sidebar-container {
  position: fixed;
  height: 100vh;
  z-index: 1000;
  transition: transform 0.3s;
  
  &.sidebar-collapsed {
    transform: translateX(-100%);
  }
  
  @include responsive.respond-to('sm') {
    transform: translateX(-100%);
    
    &.sidebar-collapsed {
      transform: translateX(0);
    }
  }
}

.main-content {
  flex: 1;
  margin-left: 220px;
  transition: margin-left 0.3s;
  
  @include responsive.respond-to('sm') {
    margin-left: 0;
  }
}

.artworks-container {
  padding: 20px;
  
  @include responsive.respond-to('sm') {
    padding: 16px;
  }
  
  @include responsive.respond-to('xs') {
    padding: 12px;
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
</style> 